<template>
  <!-- 个人信息展示 -->
  <div class="title">
    <center>
      <h3>怡家私厨</h3>
      <van-button color="pink" @click="login">登录</van-button>
      <van-button color="red" @click="register">注册</van-button>
      <van-button color="pink" @click="shopsreg">商家入驻</van-button>
      <van-button color="red" @click="shopslogin">商家登录</van-button>
      <van-button color="pink" @click="logout">退出登录</van-button>
    </center>
  </div>
  <div>
    <div class="user_update" v-for="(user, index) in user" :key="index">
      <center>
        <van-image
          v-if="user.avatar_url"
          round
          fit="cover"
          :src="user.avatar_url"
          width="150px"
          height="150px"
        />
      </center>
      <van-cell
        title="昵称"
        :value="user.nickname"
        @click="nicknameShow = true"
        is-link
      />
      <van-cell title="头像" @click="avatar_urlShow = true" is-link>
        <template #value>
          <van-image
            v-if="user.avatar_url"
            round
            fit="cover"
            :src="user.avatar_url"
            width="50px"
            height="50px"
          />
          <span v-else>无</span>
        </template>
      </van-cell>

      <van-cell
        title="密码"
        value="******"
        @click="passwordShow = true"
        is-link
      />

      <van-cell title="我的收藏" :value="name" @click="user_collect" is-link />
      <van-cell title="我的地址" :value="add" @click="user_add" is-link />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user_id: localStorage.getItem("id"),
      user: {},
      name: "收藏",
      add: "地址",
    };
  },
  methods: {
    userinfo: function () {
      // 个人信息
      this.myaxios(this.weburl + "user/userinfo/", "get", {
        user_id: this.user_id,
      }).then((data) => {
        if (data.code == 200) {
          this.user = data.data;
          console.log(data.data);
          this.$toast.success(data.msg);
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    // 点击跳转的我的地址
    add: function () {
      this.id = localStorage.getItem("id");
      console.log("id", this.id);
      this.$router.push({ name: "address", params: { id: this.id } });
    },
    // 点击获取信息
    upd: function (id) {
      this.myaxios(this.weburl + "user/userinfo/" + id + "/", "get", {
        id: this.id,
      }).then((data) => {
        console.log("112342", data);
        this.updlist = data.user_info;
        this.$toast.success(data.msg);
      });
    },
    // 修改
    update: function () {
      this.myaxios(
        this.weburl + "user/userput/" + this.updlist.id + "/",
        "put",
        this.updlist
      )
        .then((data) => {
          console.log(data);
          this.$toast.success(data.msg);
          this.submit();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 跳转到登录
    login: function () {
      this.$router.push({ name: "login" });
    },
    // 跳转到注册
    register: function () {
      this.$router.push({ name: "register" });
    },
    // 跳转到商家入驻
    shopsreg: function () {
      this.$router.push({ name: "shopsreg" });
    },
    // 跳转到商家登录
    shopslogin: function () {
      this.$router.push({ name: "shopslogin" });
    },
    // 跳转到我的收藏
    user_collect: function () {
      this.$router.push({ path: "/collect" });
    },
    // 跳转到我的地址
    user_add: function () {
      this.$router.push({ path: "/address" });
    },
    // 退出登录方法
    logout: function () {
      // 删除localstorage
      localStorage.removeItem("token");
      localStorage.removeItem("nickname");
      localStorage.removeItem("id");
      this.name = "";
      // 跳转
      window.location.href = "/index/shopslist";
    },
  },
  created() {
    this.userinfo();
  },
};
</script>

<style scoped>
@import url("../assets/style.css");
.title {
  padding: 3vw 0px;
  font-size: 6vw;
  text-align: center;
}
</style>